<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
  	<link rel="stylesheet" type="text/css" href="../js/themes/default/easyui.css" />
    <link rel="stylesheet" type="text/css" href="../js/themes/icon.css" />
    <link rel="stylesheet" type="text/css" href="demo.css"/>
    <script type="text/javascript" src="../js/jquery-1.4.4.min.js"></script>
    <script type="text/javascript" src="../js/locale/easyui-lang-zh_CN.js"></script>
    <script type="text/javascript" src="../js/jquery.easyui.min.1.2.2.js"></script>
<!--    <script type="text/javascript" src="js/juery-exends-editor.js"></script>-->
	<script type="text/javascript">
 /*	 dataGrid.datagrid('addEditor',{
								 	filed:'乔河',
									editor : {
										type : 'validatebox',
										options : {
											required : true
										}
									}
								 });*/
		
    	$(function(){

			
 			$('#dd').datagrid({
				iconCls:'icon-save',
				nowrap: false,
				striped: true,				 
				collapsible:true,
				autoRowHeight: false,		
				sortName: 'code',
				sortOrder: 'desc',
				remoteSort: false,
				idField:'code',
				fitColumns:true,
				columns:[[]],
				pagination:true,
				rownumbers:true,
				toolbar:[{
					id:'btnadd',
					text:'Add',
					iconCls:'icon-add',
					handler:function(){
						$('#btnsave').linkbutton('enable');
						$('#dd').dialog({
							'open':true,
							'modal':true
						});
					}
				},{
					id:'btncut',
					text:'Cut',
					iconCls:'icon-cut',
					handler:function(){
						$('#btnsave').linkbutton('enable');
						alert('cut')
					}
				},'-',{
					id:'btnsave',
					text:'Save',
					disabled:true,
					iconCls:'icon-save',
					handler:function(){
						$('#btnsave').linkbutton('disable');
						alert('save')
					}
				}]
				});
				
				loadCol();
 			
			
		});
		function loadCol(){
		 
			$.ajax({
				type:'get',
				url:'../pages/loaddataGrid.json',	
				dataType:'json',
				success:function(data){
					alert(data);
				  var dataGrid = $("#dd");  
				  
				 
				   for(var i=0;i<data.loadSerch.length;i++){
					   var lts="<tr>";
					   	lts+="<td>"+data.loadSerch[i].title+"</td>";
						 
						if(data.loadSerch[i].type=="text"){
							lts+="<td><input  class='easyui-validatebox'  type='text'/></td>";			
						}else if(data.loadSerch[i].type=="number"){
							lts+="<td><input class=\"easyui-numberbox\"  type=\"text\"   precision=\"2\" groupSeparator=\",\"/></td>";		
						}else if(data.loadSerch[i].type=="button"){
							lts+="<td><input type='button' value='"+data.loadSerch[i].value+"'/></td>";		
						}else if(data.loadSerch[i].type=="select"){
							lts+="<td><select style=\"width:100px;\"></select></td>";	
						}
						lts+="</tr>";
						$('#mytable').append(lts);
					 }
				 
					if (data.rows.length == 0) {  
      					$.messager.alert("结果", "没有数据!", "info", null);  
   					 }else{
						 var options = {  
							width: "auto",  
							height: "auto",  
							rownumbers: true  
						};  
						options.columns = eval(data.columns);
						//alert(options.columns[0][0].field);
						dataGrid.datagrid(options);//根据配置选项，生成datagrid  
						//dataGrid.datagrid("loadData", data);
					 }  
				},
				error:function(){
					$.messager.alert("结果", "错了!", "info", null); 
				}
			})			
		}
    </script>
</head>

<body>
	<div id="dd"></div>
    <div id="aa">
    	<table id="mytable"></table>
    </div>
</body>
</html>
